<%@page
	import="net.sf.json.*,
	com.csd.util.HttpHelper,
	com.csd.dao.BaseDao,
	com.csd.model.Store,
	com.csd.model.City,java.io.PrintWriter,java.util.*"%>
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>城市时间</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<style type="text/css">
.time-list {
	height: 300px;
	overflow-y: scroll;
}
</style>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/moment.min.js"></script>
<script type="text/javascript">
	var currentDate = moment();
	var curMonth = moment();
	var cId;
	var _tempdata;
	var tplaceid;
	var carInfo;
	var cityName;
	function subscribe(){
		var cityName = document.getElementById("cityName").innerText;
		var takeStore = document.getElementById("takeStore").innerText;
		var returnStore =  document.getElementById("returnStore").innerText;
		var takeDate = $("#takeDate").text() ;
		var takeTime = $("#takeTime").text();
		 var returnDate =  $("#returnDate").text() ;
		 var returnTime = $("#returnTime").text() ;
		 if(cityName == "请选择城市"){
			 alert("请选择城市");
			 return;
		 }
		 if(takeStore == "请选择取车地点"){
			 alert("请选择取车地点");
			 return
		 }
		 if(returnStore == "请选择还车地点"){
			 alert("请选择还车地点");
			 return;
		 }
		if(returnDate == "还车日期"){
			alert("还车日期");
			return;
		} 
		if(returnTime == "请选择"){
			alert("请选择还车时间");
			return;
		}
		var beginTime = takeDate+" "+takeTime;
		var endTime= returnDate+" "+returnTime;
		location.href="../CarTypeServlet?beginTime="+beginTime+"&endTime="+endTime+"&cityID="+cId+"&tplaceid="+tplaceid+"&cityName="+cityName;
		/* $.post("../CarTypeServlet?beginTime="+beginTime+"&endTime="+endTime+"&cityID="+cId+"&tplaceid="+tplaceid
				);  */
	}
	function GetretTd(obj) {
		var strtemp = "";
		$("#store_ulret").html("");
		for (var i = 0; i < _tempdata.length; i++) {
			if (_tempdata[i].MgrPlace == $(obj).attr("id")) {
				strtemp = strtemp + "<li id='"+_tempdata[i].TradareaID+"' >"
						+ _tempdata[i].name + "</li>";
			}
		}
		$("#store_ulret").append(strtemp);

	}
	$(function() {
		contentInit()
		dateInit();
		$(".select-item:eq(0)")
				.click(
						function() {
							$('#myModal').modal({
								backdrop : "static"
							})
							$(".city-list li").click(function() {
								cId = $(this).attr("id");
								var text = $(this).html();
								$(".select-item:eq(0) .text").html(text);
								$(".select-item:eq(1) .text").html("请选择取车地点");
								$(".select-item:eq(2) .text").html("请选择还车地点");
								$('#myModal').modal('hide');
							})
<%String cityJson = HttpHelper.HttpPost("", BaseDao.CITY);
			JSONObject jb = JSONObject.fromObject(cityJson);
			int status = jb.getInt("status");
			String msg = jb.getString("msg");
			JSONArray jsons = jb.getJSONArray("data");
			List<City> citys = new ArrayList<City>();
			for (int i = 0; i < jsons.size(); i++) {
				JSONObject tempJson = JSONObject.fromObject(jsons.get(i));
				City city = new City();
				city.setCityId(tempJson.getString("CityId"));
				city.setCityName(tempJson.getString("CityName"));
				citys.add(city);
			}
			if (status == 0) {
				request.getSession().setAttribute("citys", citys);
			} else {
				PrintWriter ot = response.getWriter();
				ot.println("<script language=\"javaScript\">");
				ot.println("alert(" + msg + ");");
				ot.println(" window.location='www/CityTime.jsp'");
				ot.println("</script>");

			}%>
	})
		var _tdid;

		$(".select-item:eq(1)")
				.click(
						function() {
							cityName = document.getElementById("cityName").innerText;
							if (cityName == '请选择城市') {
								alert('请选择城市');
							} else {
								$.post('../StoreNameListServlet?cid='
														+ cId,
												function(result) {
													var resultJson = $
															.parseJSON(result);
													if(resultJson.status != 0){
														alert(resultJson.msg);
														return;
													}
													var city = resultJson.data;
													_tempdata = city;
													var ul = document
															.getElementById("store_ul");
													$("#store_ul").html("");
													var strtemp = "";
													for (var i = 0; i < city.length; i++) {
														strtemp = strtemp
																+ "<li id='"
																+ city[i].MgrPlace
																+ "' onclick='GetretTd(this)'>"
																+ city[i].name
																+ "</li>";
													}
													$("#store_ul").append(
															strtemp);
													$('#myStore').modal({
														backdrop : "static"
													})
													$(".store-list li")
															.click(
																	function() {
																		var text = $(
																				this)
																				.html();
																		$(
																				".select-item:eq(1) .text")
																				.html(
																						text);
																		$(
																				'#myStore')
																				.modal(
																						'hide');
																		$(
																				".select-item:eq(2) .text")
																				.html(
																						text);
																		tplaceid = $(this).attr("id");																	});
												});

							}

						})

		$(".select-item:eq(2)").click(function() {
			var takeStore = document.getElementById("takeStore").innerText;
			if(takeStore == "请选择取车地点"){
			alert("请选择取车地点");
			return;
			}
			$('#myStoreret').modal({
				backdrop : "static"
			})
			$(".store-list li").click(function() {
				var text = $(this).html();
				tplaceid = $(this).attr("id");
				$(".select-item:eq(2) .text").html(text);
				$('#myStoreret').modal('hide');
			});

		})

		$(".circle-rectangle .time").click(function() {
			var index = $(".circle-rectangle .time").index($(this));
			$('#timeModal').data('type', index);
			if (index == 0) {
				$("#timeModal .alert-title").html('取车时间');
			} else if (index == 1) {
				$("#timeModal .alert-title").html('还车时间');
			}

			$('#timeModal').modal({
				backdrop : "static"
			})
		})
		$(".time-list li").click(function() {
			var index = $('#timeModal').data('type');
			var text = $(this).html();
			$(".circle-rectangle .time").get(index).innerHTML = text;
			$('#timeModal').modal('hide');
			if (index == 0) {
				window.localStorage.setItem("takeTime", text);
			} else if (index == 1) {
				window.localStorage.setItem("returnTime", text);
			}
		})

		//选择日期
		$(".circle-rectangle .text")
				.click(
						function() {
							var index = $(".circle-rectangle .text").index(
									$(this));
							$('#dateModal').data('type', index);
							$('#dateModal').modal({
								backdrop : "static"
							})

							$(".week-date")
									.delegate(
											"li",
											"click",
											function() {
												var index = $('#dateModal')
														.data('type');
												var text = $(this).attr("dd");
												$(".circle-rectangle .text")
														.get(index).innerHTML = $(
														this).attr("dd");
												$('#dateModal').modal('hide');
												if (index == 0) {
													window.localStorage
															.setItem(
																	"takeDate",
																	text);
												} else if (index == 1) {
													window.localStorage
															.setItem(
																	"returnDate",
																	text);
												}
											})
						})
	})

	/**获取今天的年月日*****************************************************************/
	function GetDateStr(AddDayCount) {
		var dd = new Date();
		dd.setDate(dd.getDate() + AddDayCount);//获取AddDayCount天后的日期
		var y = dd.getFullYear();
		var m = dd.getMonth() + 1;//获取当前月份的日期
		var d = dd.getDate();
		if(m < 10){
			m = "0"+m;
		}
		if(d < 10){
			d = "0"+d;
		}
		return y + "-" + m + "-" + d;
	}
	/**默认取车时间***********************/
	function contentInit() {
		var d = new Date();
		var m = d.getMinutes();
		var h = d.getHours();
		
		if(m > 30){
			h = h + 4;
		}else{
			h = h+3;
		}
		if(h > 20){
			$("#takeDate").html(GetDateStr(1));
			$(takeTime).html("08:00");
		}else{
			$("#takeDate").html(GetDateStr(0));
			if(h < 10){
				h = "0"+h+":00";
			}else{
				h = h+":00";
			}
			$(takeTime).html(h);
			
		}

	}
	//******************************************************日期弹出框相关的函数*******************************//

	//日期选择框初始化
	function dateInit() {
		var arr = getAllDate(curMonth);
		initDateLi(arr);
		$(".date-left").click(function() {
			curMonth.add("M", -1);
			var tmpArray = getAllDate(curMonth);
			initDateLi(tmpArray);
		});

		$(".date-right").click(function() {
			curMonth.add("M", 1);
			var tmpArray = getAllDate(curMonth);
			initDateLi(tmpArray);
		});

		//周六，周日变红色
		$(".week li").each(function(i) {
			if (i == 0 || i == 6) {
				$(this).addClass("red");
			}
		})
	}

	//给出moment当前日期
	function getAllDate(curdate) {
		var dayArray = Array();//日期数组
		var firstDay = curdate.date(1);
		var firstWeek = firstDay.day();//一个月第一天星期几	

		if (firstWeek == 0)
			firstWeek = 7;

		//上个月的日期
		for (var i = 0; i < firstWeek; i++) {
			var tmpDay = firstDay.clone();
			tmpDay.add('days', i - firstWeek)
			var day = new Day(tmpDay, 0);
			dayArray.push(day);
		}

		//当月的日期
		var tmpDay1 = firstDay.clone();//第一天
		var tmpDay2 = firstDay.clone();//最后一天
		tmpDay2.add('M', 1).date(0);
		var curDays = tmpDay2.date();//当月总天数

		for (var i = 0; i < curDays; i++) {
			if (i > 0) {
				tmpDay1.add('days', 1);
			}

			var day = null;
			if (tmpDay1.diff(currentDate, 'days') == 0) {
				var day = new Day(tmpDay1, 2);
			} else {
				var day = new Day(tmpDay1, 1);
			}
			dayArray.push(day);
		}

		//下个月的日期
		for (var i = 0; i < 42 - firstWeek - curDays; i++) {
			tmpDay2.add('days', 1)
			var day = new Day(tmpDay2, 3);
			dayArray.push(day);
		}

		return dayArray;
	}

	//日期对象2014-06-30
	function Day(curdate, type) {
		this.week = curdate.days();//星期
		this.daynum = curdate.date();
		this.curdate = curdate.format('YYYY-MM-DD');//当前日期
		this.type = type;//0为上一个月的日期，1为这个月的日期,2为当天日期,3为下一个月的日期
	}

	function initDateLi(arr) {
		$("#week-date-li").html('');
		$.each(arr, function(i, n) {
			var c = ' class="';
			if (n.type == 0 || n.type == 3) {
				c += 'gray';
			} else if (n.type == 2) {
				c += 'cur-bg';
			}
			//如果日期为周六，或者周日,变红色
			if ((n.week == 0 || n.week == 6) && n.type == 1) {
				c += ' red';
			}

			$("#week-date-li").append(
					'<li dd="'+n.curdate+'"'+c+'">' + n.daynum + '</li>');
		});

		var liWidth = parseInt($(window).width() * 0.9 / 7) + 1;//边框线
		var boxWidth = liWidth * 7 + 1;
		$(".alert-date-box").css("width", boxWidth);

		$(".alert-date-box .alert-title").html(curMonth.format("YYYY-MM"));
		$(".alert-date-box .week li,.alert-date-box .week-date li").css(
				"width", liWidth);
		//鼠标放上去背景变色
		$(".week-date li").hover(function() {
			//不为当上个月下个月并且不为当天时期
			if (!$(this).is('.gray') && !$(this).is('.cur-bg'))
				$(this).addClass('bg-color');
		}, function() {
			$(this).removeClass('bg-color');
		});
	}

	
</script>
</head>
<body
	style="background: url(images/main_bg.png) no-repeat left bottom; background-color: #fcfef5;">

	<div class="main-box" style="padding-top: 60px;">
		<div class="navbar-fixed-top">
			<div class="nav-box">
				<div class="nav-left">
					<a href="CityTime.html"><img src="images/btn_back.png"
						height="40"></a>
				</div>
				<div class="nav-center">选择门店</div>
				<div class="nav-right">&nbsp;</div>
				<div class="clear"></div>
			</div>
		</div>


		<div class="circle-select">
			<div class="select-item">
				<div class="img">
					<img src="images/city.png" width="30" height="30">
				</div>
				<div class="text" id="cityName">请选择城市</div>
				<div class="clear"></div>
			</div>
		</div>

		<div class="circle-select">
			<div class="select-item">
				<div class="img">
					<img src="images/Stores.png" width="30" height="30">
				</div>
				<div class="text" id="takeStore">请选择取车地点</div>
				<div class="clear"></div>
			</div>
			<div class="lineNone"></div>
			<div class="select-item">
				<div class="img">
					<img src="images/Stores.png" width="30" height="30">
				</div>
				<div class="text" id="returnStore">请选择还车地点</div>
				<div class="clear"></div>
			</div>
		</div>

		<div class="select-datetime">
			<div class="circle-rectangle">
				<div class="img">
					<img src="images/Calendar.png" width="20">
				</div>
				<div class="text" id="takeDate">出车日期</div>
				<div class="clear"></div>
			</div>
			<div class="circle-rectangle">
				<div class="time" id="takeTime">请选择</div>
				<div class="time-img">
					<img src="images/select-time.png">
				</div>

				<div class="clear"></div>
			</div>
		</div>
		<div class="clear"></div>
		<div class="select-datetime">
			<div class="circle-rectangle">
				<div class="img">
					<img src="images/Calendar.png" width="20">
				</div>
				<div class="text" id="returnDate">还车日期</div>
				<div class="clear"></div>
			</div>
			<div class="circle-rectangle">
				<div class="time" id="returnTime">请选择</div>
				<div class="time-img">
					<img src="images/select-time.png">
				</div>

				<div class="clear"></div>
			</div>
		</div>
		<div class="clear"></div>
		<div class="btn-datetime">
			<button  type="button" class=" btn btn-warning btn-lg btn-block" style="margin-right: 80px"
				onclick="subscribe()">行程预定</button>
		</div>
		<p>&nbsp;</p>
		<p>
			<br>
		</p>
	</div>

	<div class="modal fade" id="myModal">
		<div class="alert-box">
			<div class="alert-title">选择城市</div>
			<div class="alert-content">
				<ul class="city-list">
					<c:if test="${not empty citys}">
						<c:forEach var="city" items="${citys}">
							<li id="${city.cityId}">${city.cityName}</li>
						</c:forEach>
					</c:if>
				</ul>

			</div>
		</div>
	</div>

	<!-- 取车地点 -->
	<div class="modal fade" id="myStore">
		<div class="alert-box">
			<div class="alert-title">选择门店</div>
			<div class="alert-content">
				<ul class="store-list" id="store_ul">
				</ul>
			</div>
		</div>
	</div>
	<!-- 还车地点  -->
	<div class="modal fade" id="myStoreret">
		<div class="alert-box">
			<div class="alert-title">选择门店</div>
			<div class="alert-content">
				<ul class="store-list" id="store_ulret">

				</ul>
			</div>
		</div>
	</div>

	<div class="modal fade" id="timeModal">
		<div class="alert-box">
			<div class="alert-title">取车时间</div>
			<div class="alert-content">
				<ul class="time-list">
					<li>08:00</li>
					<li>08:30</li>
					<li>09:00</li>
					<li>09:30</li>
					<li>10:00</li>
					<li>10:30</li>
					<li>11:00</li>
					<li>11:30</li>
					<li>12:00</li>
					<li>12:30</li>
					<li>13:00</li>
					<li>13:30</li>
					<li>14:00</li>
					<li>14:30</li>
					<li>15:00</li>
					<li>15:30</li>
					<li>16:00</li>
					<li>16:30</li>
					<li>17:00</li>
					<li>17:30</li>
					<li>18:00</li>
					<li>18:30</li>
					<li>19:00</li>
					<li>19:30</li>
					<li>20:00</li>
				</ul>

			</div>
		</div>
	</div>

	<div class="modal fade" id="dateModal">
		<div class="alert-date-box">
			<div class="alert-head">
				<div class="date-left"></div>
				<span class="alert-title"></span>
				<div class="date-right"></div>
				<div class="clear"></div>
			</div>
			<div class="week">
				<ul>
					<li>日</li>
					<li>一</li>
					<li>二</li>
					<li>三</li>
					<li>四</li>
					<li>五</li>
					<li>六</li>
				</ul>
				<div class="clear"></div>
			</div>
			<div class="week-date">
				<ul id="week-date-li">
					<li class="gray">28</li>
					<li>29</li>
					<li>30</li>
					<li>31</li>
					<li>1</li>
					<li>2</li>
					<li>3</li>
				</ul>
				<div class="clear"></div>
			</div>
		</div>
	</div>
</body>
</html>


<!-- $.cookie("key", "value", { expires: 1 }); //创建cookie
            $.cookie("key"); //读取cookie的值
            $.cookie("key", "value1"); //修改cookie值
            $.cookie("key", null); //删除cookie
            if (!$.cookie('key')) { //判断cookie值是否存在
                alert("不存在");
            }
 -->
